<template>
    <div class="add-content">
        <div>
            <el-form :model="state.form" label-width="auto" ref="formRef" :rules="innerrule">
                <el-form-item label="打印机备注名称" prop="printerName">
                    <el-input
                        v-model.trim="state.form.printerName"
                        maxlength="20"
                        show-word-limit
                        placeholder="请输入打印机备注名称，不超过20个字"></el-input>
                </el-form-item>
                <el-form-item label="打印机编号" prop="printerSn">
                    <el-input
                        v-model="state.form.printerSn"
                        placeholder="请输入打印机编号，9位数字"
                        disabled></el-input>
                </el-form-item>
                <el-form-item label="打印机密钥" prop="printerKey">
                    <el-input v-model.trim="state.form.printerKey" placeholder="请输入打印机密钥" disabled></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="add-btn">
            <el-button @click="router.go(-1)">取消</el-button>
            <el-button type="primary" @click="save(formRef)">保存</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import request from '@/request';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route = useRoute();
const formRef = ref();
const state = reactive({ form: { printerName: '', printerSn: '', printerKey: '' } });
const innerrule = reactive({
    printerName: [{ required: true, message: '打印机备注名称不能为空' }]
});
const getDetail = async () => {
    let res = await request('printerDetail', { id: route.query.id });
    Object.assign(state.form, res.data);
};
getDetail();
const save = async formEl => {
    if (!formEl) return;
    await formEl.validate(valid => {
        if (valid) {
            request('printerEdit', { id: route.query.id, printerName: state.form.printerName }).then(res => {
                ElMessage.success(`保存成功`);
                router.go(-1);
            });
        }
    });
};
</script>
<style lang="scss" scoped>
:deep(.el-input) {
    width: 500px;
}
.add-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 190px);
    .add-btn {
        text-align: center;
    }
}
</style>
